{% set slugifiedTitle = task.title | striptags(true) | slugify %}
{% set description = task.description | safe %}
{% set title = task.title | safe %}
{% set url = task.url %}
{% set wcag = task.wcag %}

<div class="c-checklist__wrapper">

	<div class="c-checklist__checkbox">
		<input
			type="checkbox"
			name="{{ task.checkboxId }}-checkbox"
			id="{{ task.checkboxId }}-checkbox">
		<label for="{{ task.checkboxId }}-checkbox">
			<span class="u-hide-visually">Task: {{ task.title | safe }}</span>
		</label>
	</div>

	<details class="c-checklist" data-checklist-item-id="{{ slugifiedTitle }}">
		<summary id="{{ slugifiedTitle }}" class="c-checklist__summary">
			<span class="c-checklist__summary-inner">
				<svg class="c-checklist__icon" aria-hidden="true" focusable="false" height="30" width="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M9.07,29.55l-2.15-2.1L19,15,6.92,2.55,9.07.45,23.23,15Z" fill="currentColor" /></svg>
				<span class="c-checklist__title">{{ title }}</span>
			</span>
		</summary>
		<p class="c-checklist__citation">
			<a class="u-text-transform-uppercase c-checklist__link" href="{{ url }}">{{ wcag }}</a>
		</p>
		<p class="u-font-size-body-small c-checklist__description">
			{{ description }}
		</p>
		<p class="c-checklist__share-link">
			<a class="u-text-transform-uppercase c-checklist__link" href="#{{ slugifiedTitle }}">
				Share Link
				<span class="u-hide-visually">to checklist item: {{ title }}</span>
			</a>
		</p>
	</details>

</div>
